<template>
    <el-form :inline="true" :model="formdata" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="formdata.id" placeholder="请输入类目ID" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
            <el-input v-model="formdata.name" placeholder="请输入类目名称" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--图片列表-->
    <el-table :data="productData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="60" />
        <el-table-column prop="name" label="商品名称" width="100" />
        <el-table-column prop="subName" label="商品副标题" width="100" />
        <el-table-column prop="img" label="商品图片" width="100">
            <template #default="scope">
                <img :src="scope.row.img" width="50px" height="50px">
            </template>
        </el-table-column>
        <el-table-column prop="seq" label="商品排序" width="80" />
        <el-table-column prop="status" label="商品状态" width="80" />
        <el-table-column prop="price" label="商品价格" width="80" />
        <el-table-column prop="categoryId" label="父目录ID" width="80" />
        <el-table-column prop="lastUpdateBy" label="最后更新人" width="100" />
        <!--商品状态 显示上线或下线-->
        <el-table-column prop="statusX" label="商品状态" width="80"/>
        <el-table-column fixed="right" label="操作" min-width="160">
            <template #default="scope">
                <el-button type="danger" size="small" v-if="scope.row.status != 1" @click="closeClick(scope.row,'上线',1)">
                    上线
                </el-button>
                <el-button type="danger" size="small" v-if="scope.row.status != 5" @click="closeClick(scope.row,'下线',5)">
                    下线
                </el-button>
                <el-button type="danger" size="small" v-if="scope.row.status != 10" @click="closeClick(scope.row,'禁售',10)">
                    禁售
                </el-button>
                <el-button type="warning" size="small" @click="handleClick(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background :page-size="pageData.pageSize" layout="total, prev, pager, next" :total="pageData.total"
        @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ProductApi } from '../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter} from 'vue-router'
const router = useRouter()

const productData = ref([])
const formdata = reactive({
    id: '',
    name: ''
})
const pageData = reactive({
    total: 15,
    pageSize: 3,
    pageNum: 1
})


onMounted(() => {
    CallProductApi()
})

const CallProductApi = () => {
    let id = formdata.id === '' ? undefined : formdata.id
    let name = formdata.name === '' ? undefined : formdata.name
    ProductApi.select.call({
        id: id, name: name,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res: any) => {
        console.log(res)
        productData.value = res.items
        pageData.total = res.total


    })
}
//搜索查询
const onSubmit = () => {
    console.log('submit!')
    CallProductApi()
}
// 下线按钮事件
const closeClick = (row: any,optionName:String,status:Number) => {
    ElMessageBox.confirm(
        '确认要对 ' +row.name +"进行" + optionName + '吗？',
        '警告⚠',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // ProductApi.delete.call({ id: row.id,status:status }).then((res:any) => {
            //     ElMessage({
            //         type: 'success',
            //         message: '下线成功',
            //     })
            //     CallProductApi()
            // })
            ProductApi.patch.call({ id: row.id, status: status }).then((res: any) => {
              ElMessage.success(optionName +"成功！"+res)
                CallProductApi()
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })

}

const handleClick = (row: any) => {
    console.log('click')
    router.push({ path: '/product/edit', query: { id: row.id}})
}

// 分页数据 val 当前页码
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pageData.pageNum = val
    //回调函数，重新请求数据
    CallProductApi()

}
</script>

<style scoped></style>